<template>
    <div class="taskDetailsT">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
            <span>任务详情</span>
            <i class="iconfont iconzuojiantou" style="color: white;"></i>
        </div>
        <div class="DetailsT-content">
            <div class="content-slideshow">
                <!-- <van-swipe :autoplay="3000" indicator-color="#FFFFFF">
                    <van-swipe-item >
                        <img v-lazy="taskObject.moonlightedUrl"  />
                    </van-swipe-item>
                </van-swipe> -->
                <img :src="taskObject.moonlightedUrl"  />
            </div>
            <div class="content-name">
                <p>{{taskObject.moonlightedName}}</p>
                <p>
                    <span>发布时间:</span>
                    <span>{{taskObject.moonlightedDate}}</span>
                </p>
            </div>
            <div class="content-form">
                <p>
                    <span class="form-one">任务类型:</span>
                    <span class="form-two">{{taskObject.moonlightedType}}</span>
                </p>
                <p>
                    <span class="form-one">所需人员:</span>
                    <span class="form-two">{{taskObject.moonlightedNeed}}人</span>
                    <span class="form-three">已报名:</span>
                    <span class="form-four">{{taskObject.moonlightedRegistration ==''?'0':taskObject.moonlightedRegistration }}人</span>
                </p>
            </div>
            <div class="content-detailed">
                <div class="detailed-top">
                    <p>详细说明</p>
                    <p>{{taskObject.moonlightedDir}}</p>
                </div>
                <div class="detailed-buttom">
                     <button @click="registraeSuccess">立即报名</button>
                </div>
            </div>
        </div>
        <!-- 弹出层 -->
        <div class="cancel-Box" v-show="ShowS" :style="CHeight">
            <div class="cancel-wicket">
                <div class="cancel-title">
                    <span>报名成功</span>
                    <img src="../assets/taskdetail/Colse.png" alt="" @click="wicket">
                </div>
                <div class="cancel-center">
                    <img src="../assets/taskdetail/Colse.png" alt="">
                    <div class="center-button">
                        <p @click="wickets">去我的任务列表查看</p>
                    </div>
                </div>
            </div>
        </div>  
    </div>
</template>

<script>
import { Toast ,Lazyload } from 'vant';
export default {
    name: "taskDetails",
    data() {
        return {
            id:"",
            name:"",
            scheduleStatusLeft:1,//进度状态
            scheduleStatusRight:0,//进度状态
            //弹窗
            ShowS:false,
            chare:false,
            chareone:true,
            charetwo:true,
            charethree:true,
            charefour:true,
            textName:"",
            phoneNumber:"13673379816",//拨打电话
            CHeight:{
                height: "100vh",
            },
            heightS:"",
            taskId:"",//任务详情id
            taskObject:{},
            userId:'',
            successName:true,
            failJob:false
        };
        
    },
    mounted() {
         //监听浏览器返回事件
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.onClickLeft, false);
        }
        //监听手机屏幕的高度
        this.heightS = window.screen.height 
        window.onresize = ()=>{ 
            var heightS = document.documentElement.clientHeight || document.body.clientHeight 
            var SS = heightS*2/100
            if(SS < 9.6){
                var HH = String(this.heightS*2/100);
                this.CHeight.height = HH+"rem";
            }
            else{
                this.CHeight.height ="100vh";
            }
        }  
          this.ShowS=this.$route.query.success
    },
    created (){
        this.userId =JSON.parse(localStorage.getItem("key")).userId;
        this.taskId = this.$route.query.id;
        this.getTaskDetail();
        if(this.$route.query.success){
            this.failJob=true;
            this.successName=false;
        }
    },
    destroyed() {
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.onClickLeft, false);
    },
    computed: {
        figure(){
            return this.textName.length;
        }
    },
    methods: {
        //放弃工作
        giveJob(){
            Toast("放弃工作")
            this.ShowS=true;
        },
        onClickLeft() {
            // if(this.name == "我的任务"){
            //     this.$router.push("/MyAssignment");
            // }
            this.$router.push("/partTime");
   
        },
        //报名成功
        registraeSuccess (){
             this.$router.push({path:"/signUp",query:{name:this.name,id:this.taskId,userId:this.userId}});
        },
        //拨打电话
        makeCall (){
             this.ShowS = true;
        },
     
        StatusRightS(){
            if(this.scheduleStatusRight == 0){
                window.location.href = 'tel://' + this.phoneNumber;
            }
            
        },
        wicket(){
            this.ShowS = false;
        },
         wickets(){
             this.$router.push({path:"/MyAssignment",query:{}});
        },
        //单选按钮
        chareS(index){
            if(index == 0){
               this.chare = !this.chare;
               this.chareone = true;
               this.charetwo = true;
               this.charethree = true;
               this.charefour  = true;
            }
            if(index == 1){
                this.chareone = false;
                this.chare = true;
                this.charetwo = true;
                this.charethree = true;
                this.charefour  = true;
            }
            if(index == 2){
                this.charetwo = false;
                this.chare = true;
                this.chareone = true;
                this.charethree = true;
                this.charefour  = true;
            }
            if(index == 3){
                this.charethree = false;
                this.chare = true;
                this.chareone = true;
                this.charetwo = true;
                this.charefour  = true;
            }
            if(index == 4){
                this.charefour = false;
                this.chare = true;
                this.chareone  = true;
                this.charetwo = true;
                this.charethree = true;
            }
            
        },
        //获取任务详情数据
        getTaskDetail (){
            this.$axios.post("/cct/moonlighted/findByJobId",{
                id:this.taskId
            }).then(res =>{
                if(res.data.code==0){
                     console.log("获取任务详情",res)
                     this.taskObject = res.data.data;
                     this.name =res.data.data.moonlightedName  
                }
            })
        }
       

        
    }
};
</script>

<style lang="less" scoped>
.taskDetailsT{
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 0;
    // position: relative;
    .title {
        width: 100%;
        font-size: 0.36rem;
        color: #333;
        height: 1.25rem;
        line-height: 1.25rem;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0 0.2rem;
        box-sizing: border-box;
    }
    .DetailsT-content{
        .content-slideshow{
            img{
                width: 100%;
                height: 4.2rem;
            }
        }
        .content-name{
            width: 100%;
            height: 1.86rem;
            padding: 0.33rem 0.34rem;
            background: #FFFFFF;
            p{
                &:nth-child(1) {
                    font-size: 0.28rem;
                    font-family: "PingFang-SC-Medium";
                    font-weight: 600;
                    color:#3C3C3C;
                    line-height: 0.74rem;
                }
                &:nth-child(2) {
                    font-size: 0.21rem;
                    font-family: "PingFang-SC-Medium";
                    font-weight: 400;
                    color: #999999;
                    line-height: 0.3rem;
                    margin-top: 0.15rem;
                    span{
                        &:nth-child(2) {
                            margin-left: 0.1rem;
                        }
                    }
                }
            }
        }
        .content-form{
            width: 100%;
            height: 1.44rem;
            margin-top: 0.1rem;
            background: #FFFFFF;
            p{
                &:nth-child(1) {
                    padding: 0.19rem 0.33rem;
                    .form-one{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 600;
                        color: #666666;
                    }
                    .form-two{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 600;
                        color: #999999;
                        margin-left: 0.2rem;
                    }
                }
                &:nth-child(2) {
                    padding: 0.19rem 0.33rem;
                    .form-one{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 600;
                        color: #666666;
                    }
                    .form-two{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 600;
                        color: #999999;
                        margin-left: 0.2rem;
                    }
                    .form-three{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 600;
                        color: #999999;
                        margin-left: 2.88rem;
                    }
                    .form-four{
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 600;
                        color: #999999;
                        margin-left: 0.2rem;
                    }
                }
            }
        }
        .content-detailed{
            width: 100%;
            margin-top: 0.1rem;
            overflow: auto;
            .detailed-top{
                width: 100%;
                height: 3.37rem;
                padding: 0.24rem 0.33rem;
                overflow: auto;
                p{
                    &:nth-child(1) {
                        font-size: 0.26rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 520;
                        color:#666666;
                        
                    }
                    &:nth-child(2) {
                        font-size: 0.24rem;
                        font-family: "PingFang-SC-Medium";
                        color:#333333;
                        margin-top: 0.28rem;
                        line-height: 0.48rem;
                    }
                }
            }
            .detailed-buttom{
                width: 100%;
                height: 1rem;
                position: fixed;
                left: 0;
                bottom: 0;
                button{
                    &:nth-child(1) {
                        width: 100%;
                        height: 1rem;
                        font-size: 0.3rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 520;
                        color:#38A83F;
                        background: rgb(215,238,217);
                    }
                }
            }
        }
    }
    .cancel-Box{
        width: 100%;
        height: 100vh;
        position: absolute;
        top:0;
        left: 0;
        background: rgba(0,0,0,0.45);
        .cancel-wicket{
            width: 5.9rem;
            height:4.2rem;
            background: #FFFFFF;
            margin:4rem auto;
            border-radius: 0.1rem;
            .cancel-title{
                font-family: "PingFang-SC-Medium";
                color:#333333;
                padding: 0.32rem 0rem;
                text-align: center;
                span{
                    font-size: 0.3rem;
                    font-family: "PingFang-SC-Medium";
                    font-weight: 530;
                    color:#333333;
                    line-height: 0.28rem;
                    margin-left: 0.28rem
                }
                img{
                    float: right;
                    width: 0.28rem;
                    // line-height: 0.28rem;
                    margin-right: 0.28rem;
                    
                }
                
            }
            .cancel-center{
               img{
                   width: 1.2rem;
                   height: 1.2rem;
                   margin-left: 50%;
                   transform: translateX(-50%);
                   margin-top: 0.4rem;
                   margin-bottom: 0.4rem;
               }
                .center-button{
                    width: 100%;
                    height: 0.6rem;
                    margin-top: 0.2rem;
                   p{
                        width: 60%;
                        height: 0.6rem;
                        line-height:  0.6rem;
                        text-align: center;
                        font-size: 0.3rem;
                        font-family: "PingFang-SC-Medium";
                        font-weight: 520;
                        color:#FFFFFF;
                        background: #38A83F;
                        margin-left: 20%;
                        border-radius: 0.1rem;
                    }
                }
            }
        }
    }
}
</style>
